<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<html>
<head>
<title>Tìm kiếm sách</title>
</head>
<body>
	<div class="list-view">
			<div class="pr-head"><span>${bookTypeName}</span></div>
			<ul class="pr-cata-list" id="listBooks">
				<c:choose>
					<c:when test="${empty listBooks}">
						<li><div class="messageResultSearch">Không có dữ liệu phù hợp</div></li>
					</c:when>
					<c:otherwise>
						<c:forEach var="item" items="${listBooks}">
							<li class="pr-cata-item">
								<div class="pr-cata-mask">
									<div onclick="viewDetail('${item.id}');" class="pr-cata-img" style="background-image: url('getBookImage?bookId=${item.id}'); background-size: 100% 100%;"></div>
									<a href="#" class="pr-btn">Add</a>
								</div>
								
								<div class="pr-cata-info" style="font-size: 13px;">
									<div onclick="viewDetail('${item.id}');">
									<span class="pr-name">${item.name}</span>
									<span class="pr-desc">${item.shortDescription}</span>
									</div>
									<c:if test="${item.discount > 0}">
										<div><strong>Giảm giá: </strong>${item.discount}%</div>
										Giá cũ: <span class="original-price"><fmt:formatNumber pattern="#,###.##" value="${item.price}"/> VNĐ</span>
									</c:if>
									<span class="pr-price" data="${item.id}"><fmt:formatNumber pattern="###,###.###" value="${item.price - (item.price*item.discount/100)}" /> VNĐ</span>
								</div>
							</li>
						</c:forEach>
						<c:if test="${pagingInfo.pageIndex < pagingInfo.pageSize}">
							<li class="viewMoreLink"><div class="viewMore" onclick="loadMoreBooks(${pagingInfo.pageIndex + 1}, ${categoryId});">Xem thêm</div></li>
						</c:if>
					</c:otherwise>
				</c:choose>
			</ul>
		</div>
		<script type="text/javascript">
			function loadMoreBooks(pageIndex, categoryId){
				$(".viewMoreLink").remove();
				$.ajax({
					type: "POST",
					url: "ajax/getMoreBooksByCategory",
					data: {
						pageIndex: pageIndex,
						categoryId: categoryId
					},
					success: function(data){
						$("#listBooks").append(data);
					}
				});
			}
		</script>
</body>
</html>